/* 
面向过程 ：按照事物的发展顺序 ，程序的发展顺序 。第一步 第二步 ....
面向对象 : 
        1.分析事物中的对象，                    分析程序中涉及的对象 
        分析事物的行为（动词）和特征（名词）     分析对象的方法 和 属性 （和需求有关）
        2. 抽象出对象里的共性的 方法和属性 ----》抽象成类（构造函数，类似于类的概念）
        3.研究类之间的逻辑关系 ，组装逻辑关系 ，实现程序
        4.实例化类，调用对象的特性方法 。
*/

// 对象 ： 放大镜对象 
// 抽象成类 

// 定义一个 放大镜类
function Enlarge(showEle, maskEle, enlargeEle, boxEle, pEles) {
    this.showEle = showEle;
    this.maskEle = maskEle;
    this.enlargeEle = enlargeEle;
    this.boxEle = boxEle;
    this.pEles = pEles;
    this.enterFn();  // 所有对象的共性方法 ，就在类里调用。如果不是共性方法 那么就在外边调用 
    this.leaveFn();
    this.moveFn();
    this.dotFn();
}

// 定义和对象 或者是和类有关的方法 ；

// 鼠标进入的方法
Enlarge.prototype.enterFn = function () {
    var that = this;
    this.showEle.onmouseenter = function () {
        console.log("enter");
        that.maskEle.style.display = "block";
        that.enlargeEle.style.display = "block";
    }
}

// 鼠标移除的方法 
Enlarge.prototype.leaveFn = function () {
    var that = this;
    this.showEle.onmouseleave = function () {
        console.log(this);
        that.maskEle.style.display = "none";
        that.enlargeEle.style.display = "none";
    }
}



// 放大镜的移动方法 
Enlarge.prototype.moveFn = function () {
    var that = this;  // 指向 实例化对象
    this.showEle.onmousemove = function (e) {
        console.log(this) // 会指向showEle 元素
        // console.log(boxEle.offsetLeft);
        // 1.获取鼠标相对于父级的坐标
        var x = e.clientX - that.boxEle.offsetLeft;
        var y = e.clientY - that.boxEle.offsetTop;
        // console.log(x,y);
        // console.log(x); 
        // 2.设置遮罩层 到鼠标的位置
        var disX = x - that.maskEle.offsetWidth / 2;
        var disY = y - that.maskEle.offsetHeight / 2;
        // console.log(disX,disY)
        // 左边 不能超出边界
        if (disX <= 0) {
            disX = 0;
        }
        // 右边的边界
        if (disX >= (that.showEle.clientWidth - that.maskEle.offsetWidth)) {
            disX = (that.showEle.clientWidth - that.maskEle.offsetWidth)
        }


        // 上边距
        if (disY <= 0) {
            disY = 0;
        }

        // 下边距
        if (disY >= (this.clientHeight - that.maskEle.offsetHeight)) {
            disY = (this.clientHeight - that.maskEle.offsetHeight)
        }
        // 获取 红色和蓝色的宽度 

        var a = that.maskEle.offsetLeft;
        var b = this.clientWidth;
        // 获取背景图的宽和高 
        // console.log(a,b);
        var wh = getComputedStyle(that.enlargeEle, null)['background-size'];
        console.log(wh);
        //  如果直接设置 background属性 ，会把之前的 background-size 覆盖 掉
        // 一旦覆盖掉 background-size之后 那么 wh获取不到了 
        var arr = wh.split(" ");
        var w = parseInt(arr[0]);
        var h = parseInt(arr[1]);
        // console.log(w,h);

        var xx = (a / b) * w;  // 获取放大区域 相对于背景图的位置 
        var yy = (that.maskEle.offsetTop / this.clientHeight) * h;
        // 相对位置 设置到背景的定位上
        that.enlargeEle.style.backgroundPosition = "-" + xx + "px -" + yy + "px";
        that.maskEle.style.left = disX + "px";
        that.maskEle.style.top = disY + "px";
    }
}


Enlarge.prototype.dotFn = function () {
    var that = this;
    for (let i = 0; i < this.pEles.length; i++) {
        this.pEles[i].onclick = function () {
            // 点击的小图 添加类名修改样式 
            console.log(i);
            // 把其他所有的样式去掉
            for (let j = 0; j < that.pEles.length; j++) {
                that.pEles[j].classList.remove("active");
            }
            this.classList.add("active");

            // 点击的时候  切换 中图 和 大图
            // 替换 中图的路径
            that.showEle.querySelector("img").src = "./imgs/" + (i + 1) + ".jpg";
            // 替换大图的背景图 
            // enlargeEle.style.background = "url(./imgs/"+(i+1)+".big.jpg) no-repeat" ; // 不能直接设置 background属性 ，会把其他的background属性覆盖掉，必须 background-size ...
            that.enlargeEle.style.backgroundImage = "url(./imgs/" + (i + 1) + ".big.jpg";
            that.enlargeEle.style.backgroundRepeat = "no-repeat";
        }
    }
}




// var enlarge1 = new Enlarge();
// enlarge.enterFn();
// var enlarge2 = new Enlarge();
// enlarge.enterFn();
// var enlarge3 = new Enlarge();
// enlarge.enterFn();



// var enlarge4 = new Enlarge();
// var enlarge5 = new Enlarge();
// var enlarge6 = new Enlarge();


